<template>
	<view class="content">
		<view class="zhuige-classify">
			<!-- 左侧 -->
			<scroll-view class="zhuige-classify-key" scroll-y scroll-with-animation>
				<view v-for="(tab, index) in tabs" :key="index" :class="cur_tab==tab.id?'active':''"
					@click="clickTab(tab)"><text>{{tab.name}}</text></view>
			</scroll-view>

			<!-- 右侧 -->
			<scroll-view class="zhuige-classify-side" scroll-top="scrollTop" scroll-y scroll-with-animation>
				<!-- 轮播 -->
				<!-- <view class="zhuige-classify-swiper">
					<zhuige-swiper type="zhuige-mini-swiper" :items="slides"></zhuige-swiper>
				</view> -->

				<!-- 列表 -->
				<view class="zhuige-classify-side-list">
					<view class="zhuige-block">
						<!-- 友链 -->
						<view v-if="cur_tab == 'friendLink'" v-for="(item, index) in forums" :key="index" 
							class="zhuige-social-poster-blcok zhuige-friends-block" @click="openLink(item.link)">
							<view class="zhuige-ranking-num">
								<text>{{index + 1}}</text>
							</view>
							<view class="zhuige-social-poster">
								<view class="zhuige-social-poster-avatar">
									<image mode="aspectFill" :src="item.webLogo" onerror="this.src='../../../static/404.png';"></image>
								</view>
								<view class="zhuige-social-poster-info">
									<view>
										<text>{{item.name}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 技术栈 -->
						<view v-if="cur_tab == 'technology'" v-for="(item, index) in forums" :key="index"
							class="zhuige-social-poster-blcok zhuige-friends-block" @click="openLink(item.link)">
							<view class="zhuige-ranking-num">
								<text>{{index + 1}}</text>
							</view>
							<view class="zhuige-social-poster">
								<view class="zhuige-social-poster-avatar">
									<image mode="aspectFill" :src="item.logo" onerror="this.src='/static/404.png';" ></image>

								</view>
								<view class="zhuige-social-poster-info">
									<view>
										<text>{{item.name}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 归档 -->
						<view v-if="cur_tab == 'archive'" class="archive-content ">
							<div id="filing">
								<div class="item" v-for="(item, index) in forums" :key="index">
									<div class="tail"></div>
									<div class="head"></div>
									<div class="wrapper">
										<div class="panel" @click="clickArchiveList(index)">
											{{item.createMonth}} 
										
											<image src="../../../static/tabbar/more.png" style="width: 20rpx;height: 20rpx;"></image>
										</div>
										<ol class="panel-body" style="list-style-type: none;"
											:style="clickArchiveItemKey === index ? 'display: block;' : 'display: none;'">
											<li v-for="(data, index) in item.data" :key="index">
												<view @click="openLink('/pages/bbs/detail/detail?topic_id=' + data.id)"
													class="">
													<a href="#" style="color: black;">{{index+1}}. {{data.title}}</a>
												</view>
											</li>
										</ol>
									</div>
								</div>
							</div>
						</view>
						<zhuige-nodata v-if="forums.length==0"></zhuige-nodata>
					</view>
					<uni-load-more status="nomore"></uni-load-more>
				</view>
			</scroll-view>
			<!-- 创建圈子按钮 -->
			<!-- 	<view @click="openLink('/pages/bbs/forum-create/forum-create')" class="zhuige-classify-creat">
				<view>建圈</view>
			</view> -->

		</view>

	</view>
</template>

<script>
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';

	import ZhuigeSwiper from "@/components/zhuige-swiper";
	import ZhuigeNodata from "@/components/zhuige-nodata";

	export default {
		data() {
			this.loginReload = false;

			return {
				slides: [],

				tabs: [],
				cur_tab: undefined,

				forums: [],

				clickArchiveItemKey: -1,
			}
		},

		components: {
			ZhuigeSwiper,
			ZhuigeNodata
		},

		onLoad(options) {
			Util.addShareScore(options.source);

			this.loadForumCats();

			uni.$on('zhuige_event_user_login', this.onSetReload);
			uni.$on('zhuige_event_user_join_forum', this.onSetReload);
		},

		onShow() {
			if (this.loginReload) {
				this.loginReload = false;

				this.loadForumCats();
			}
		},

		onUnload() {
			uni.$off('zhuige_event_user_join_forum', this.onSetReload);
			uni.$off('zhuige_event_user_login', this.onSetReload);
		},

		onShareAppMessage() {
			return {
				title: '圈子-' + getApp().globalData.appName,
				path: Util.addShareSource('pages/tabs/forum/forum?n=n')
			};
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return {
				title: '圈子-' + getApp().globalData.appName,
			};
		},
		// #endif

		methods: {
			//----- event start -----
			/**
			 * 登录事件
			 */
			onSetReload(data) {
				this.loginReload = true;
			},
			//----- event end -----

			/**
			 * 点击打开链接
			 */
			openLink(link) {
				Util.openLink(link);
			},

			/**
			 * 点击切换分类
			 */
			clickTab(tab) {
				this.cur_tab = tab.id;

				this.loadForums(this.cur_tab);
			},

			/**
			 * 点击圈子
			 */
			clickForum(id) {
				Util.openLink('/pages/bbs/detail/detail?topic_id=' + id);
			},

			/**
			 * 加载圈子
			 */
			loadForums(type) {
				if (type == "friendLink") {
					Rest.get(Api.initFriendLinks, {
						state: 1
					}).then(res => {
						this.forums = res.result;
					}, err => {
						console.log(err)
					});
				} else if (type == "technology") {
					Rest.get(Api.queryTechnologyStack, {
						pageSize: 1000
					}).then(res => {
						this.forums = res.result.records;
					}, err => {
						console.log(err)
					});
				} else if (type == "wallpaper") {

				} else if (type == "archive") {
					Rest.get(Api.queryArticleGroupByCreateTime, {
						pageSize: 1000
					}).then(res => {
						this.forums = res.result;
					}, err => {
						console.log(err)
					});
				}

			},

			/**
			 * 综合页面-加载左侧菜单
			 */
			loadForumCats() {
				Rest.get(Api.queryMomprehensiveMenu).then(res => {
					// this.slides = res.result.slides;
					this.tabs = res.result.tabs;

					if (!this.cur_tab) {
						this.cur_tab = res.result.cur_tab;
					}

					this.loadForums(this.cur_tab);
				}, err => {
					console.log(err)
				});
			},
			clickArchiveList(key) {
				if (this.clickArchiveItemKey === key) {
					this.clickArchiveItemKey = -1
				} else {
					this.clickArchiveItemKey = key
				}
			},
		}
	}
</script>

<style>
	.content {
		/* position: fixed; */
		height: 100%;
		width: 100%;
	}

	.zhuige-classify {
		display: flex;
		height: 100%;
		overflow-y: scroll;
		width: 100%;
	}

	.zhuige-classify-key {


		position: fixed;
		width: 25%;
		background: #FFFFFF;
		border-radius: 0 12rpx 12rpx 0;
	}

	.zhuige-classify-key::-webkit-scrollbar {
		display: none;
	}

	.zhuige-classify-key view {
		height: 120rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: left;
		padding-left: 40rpx;
		font-weight: 500;
	}

	.zhuige-classify-key view.active {
		background: #f5f5f5;
	}

	.zhuige-classify-key view text {
		color: #555555;
		font-weight: 400;
	}

	.zhuige-classify-key view.active text {
		font-weight: 600;
		font-size: 32rpx;
		color: #010101;
	}

	.zhuige-classify-side {
		margin-left: 25%;
		width: 75%;
		height: 100%;
		overflow-y: scroll;
		background: #f5f5f5;
	}

	.zhuige-classify-swiper {
		padding: 0 20rpx 20rpx;
	}

	.zhuige-classify-creat {
		position: fixed;
		z-index: 19;
		right: 40rpx;
		bottom: 160rpx;
		background: #010101;
		height: 96rpx;
		width: 96rpx;
		line-height: 96rpx;
		border-radius: 50%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	.zhuige-ranking-num {
		width: 60rpx;
		text-align: center;
		padding-right: 20rpx;
	}

	.zhuige-ranking-num text {
		font-size: 36rpx;
		font-weight: 600;
		color: #999999;
	}


	.archive-content {
		padding: 20rpx 0;
	}

	.archive-content .item {
		position: relative;
	}


	.archive-content .item .tail {
		position: absolute;
		left: 6px;
		top: 0;
		width: 1px;
		height: 100%;
		background: #ebeef5;
	}

	.archive-content .item .head {
		position: absolute;
		top: 28rpx;
		width: 26rpx;
		height: 26rpx;
		background: #ebeef5;
		border-radius: 50%;
	}

	.archive-content .item .wrapper {
		padding-left: 40rpx;
		padding-bottom: 15rpx;
	}

	.archive-content .item .wrapper .panel {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		color: #606266;
		cursor: pointer;
		background: #ebeef5;
		padding: 0 20rpx 0 20rpx;
		height: 80rpx;
		border-radius: 8rpx;
	}

	.archive-content .item .wrapper .panel svg {
		width: 10px;
		height: 10px;
		fill: #909399;
	}

	.panel-body {
		/* display: none; */
		padding: 15rpx 15rpx 0 30rpx
	}

	.zhuige-social-poster-blcok {
		display: flex;
		align-items: center;
		justify-content: left;
		margin-bottom: 20rpx;
	}
</style>
